<template>
  <div class="leftRank">
    <div class="tabs">
      <div class="van">
        <van-tabs v-model:active="active" @click-tab="itemHandler">
          <div>
            <van-tab
              class="van_tab"
              scrollspy="true"
              v-for="(item, index) in tabLists"
              :key="item.id"
              :title="item.name"
            >
              <div class="tab-border"></div>
              <div class="tab-sidebar">
                <van-sidebar v-model="active1" class="sidebar">
                  <van-sidebar-item
                    v-for="side in item.tabWraps"
                    :key="side.id"
                    :title="side.name"
                    @click="sidebarHandle(side.rankingId)"
                    class="sidebar-item"
                  />
                </van-sidebar>
                <rightRank :sideItem="sideItem" class="rightRank"></rightRank>
              </div>
            </van-tab>
          </div>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import rightRank from "../rightRank/index.vue";
import { reqRankTabs } from "@/apis/rank";
import type { TabListsModel } from "@/apis/rank";

const active = ref(0);
const active1 = ref(0);
const sceneId = ref(1);

// 获取一级的数据
const itemHandler = (name: any) => {
  active1.value = 0;
  sideItem.value = tabLists.value[name.name].tabWraps[0].rankingId;
};

// 点击二级路由
const sideItem = ref<number>(1);
const sidebarHandle = (sideId: number) => {
  sideItem.value = sideId;
};
// 获取数据
const tabLists = ref<TabListsModel>([]);
const rankTabs = async () => {
  try {
    let result = await reqRankTabs(sceneId.value);
    tabLists.value = result.data.tabLists;
    sideItem.value = tabLists.value[0].tabWraps[0].rankingId;
  } catch (error) {
    console.log(error);
  }
};
onMounted(() => {
  rankTabs();
});
</script>

<style lang="less" scoped>
.leftRank {
  position: relative;
  // 一级导航栏目
  .tabs {
    position: relative;
    .tab-border {
      margin-top: 3px;
      border-bottom: 1px solid #e8e8e8;
    }
    .van_tab {
      font-size: 14px;
    }
  }
  .van {
    .tab-sidebar {
      display: flex;
      .sidebar {
        flex-shrink: 0;
        max-width: 90px;
        height: 549px;
        position: relative;
        font-size: 14px;
        background-color: #f7f8fa;
        .sidebar-item {
          height: 45px;
          text-align: center;
          line-height: 10px;
        }
      }
      .rightRank {
        height: 530px;
      }
    }
  }
  .van-sidebar-item--select::before {
    position: absolute;
    top: 50%;
    left: 0;
    height: 50px;
    background-color: #f86442;
    content: "";
  }
}
</style>
